<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<!-- 分页
1. 如果总页数 不超过 5页 ， 显示 1 ~~ 总页数
2. 如果 总页数 超过 5页， 且 当前页 <= 3 , 则显示 1 ~ 5 页
3. 如果 总页数 超过 5页， 且 当前页 >= 总页数 -2 ， 则显示 最后 5页的内容
4. 显示  当前页 -2  ~~~ 当前页 + 2
-->
<div class="pagination">
    <!-- 如果当前页 > 1 , 则 显示上一页 -->
    <a class="left" v-if="page > 1" @click="page = page - 1"></a>

    <template v-if="total <= 5">
        <a v-for="p in total" :class="{act: p == page}" @click="page = p">{{p}}</a>
    </template>

    <template v-else-if="page <= 3">
        <a v-for="p in 5" :class="{act: p == page}" @click="page = p">{{p}}</a>
    </template>

    <template v-else-if="page >= total-2">
        <a v-for="p in 5" :class="{act: total - 5 + p == page}" @click="page = total - 5 + p">{{total - 5 + p }}</a>
    </template>

    <template v-else>
        <a v-for="p in 5" :class="{act: page -3 + p == page}" @click="page = page -3 + p">{{page -3 + p}}</a>
    </template>

    <a class="right" v-if="page < total" @click="page = page + 1"></a>


    <select v-model="page" v-if="total > 0">
        <option v-for="p in total" :value="p">{{p}}/{{total}}</option>
    </select>

</div>